<template>
	<view class="container">

		<uniSegmentedControl :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			active-color="#000" >
		</uniSegmentedControl>

		<view class=" content">
			<view v-show="current === 0">
				<view class="each_News" v-for="(item,index) in data.telling" :key='index'>
					<view class="item-text">
						<view>{{item.title}}</view>
						<text>{{item.time}}</text>
					</view>
					<image :src="item.img"></image>
				</view>
			</view>
			<view v-show="current === 1">
				<view class="each_News" v-for="(item,index) in data.organize" :key='index'>
					<view class="item-text">
						<view>{{item.title}}</view>
						<text>{{item.time}}</text>
					</view>
					<image :src="item.img"></image>
				</view>
			</view>
			<view v-show="current === 2">
				<text>333</text>
			</view>
			<view v-show="current === 3">
				<text>4444</text>
			</view>
		</view>


	</view>
</template>

<script>
	import uniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				data:{
					telling:[
						{
							title:'青川县阴平村、张家村全国最佳旅游村',
							time:'2020-4-28 21:30',
							img:'../../../static/organize/organize_News_img.png'
						},
						{
							title:'青川县张家村、阴平村全国最佳旅游村111',
							time:'2020-4-28 21:40',
							img:'../../../static/organize/organize_News_img.png'
						},
					],
					organize:[
						{
							title:'青川县阴平村、张家村全国最佳旅游村222',
							time:'2020-4-28 21:32',
							img:'../../../static/organize/organize_News_img.png'
						}
						
					],
						
					
				},
				// 选项卡状态数据
				current: 0,
				items: ['通知公告', '组织公告', '阴平党旗红', '最新动态'],
			}
		},


		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;

		.content {
			margin-top: 8rpx;
			.each_News{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #F5F5F5;
				margin-bottom: 16rpx;
				image{
					width: 208rpx;
					height: 152rpx;
					margin-bottom: 16rpx;
				}
				.item-text{
					width: 400rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-bottom: 16rpx;
					text{
						color: #9F9F9F;
						font-size: 12px;
					}
				}
				
			}
		}

	}
</style>
